<template>
    <div style="padding-top: 40px;">
        <group>
            <cell title="课程时间" :value="titlaValue"></cell>
            <cell-form-preview :list="detailList"></cell-form-preview>
        </group>
        <br>
        <br>
        <div>
            <x-button type="primary" :gradients="['#FF5E3A', '#FF9500']" @click.native="openLock">开 锁</x-button>
        </div>
        <loading :show="loading.show" :text="loading.text"></loading>
    </div>
</template>
<script>
import { CellFormPreview, Group, Cell, XButton, Loading } from 'vux'
export default {
  data () {
    return {
      titlaValue: '',
      detailList: [],
      detailData: {},
      loading: {
        show: false,
        text: '开锁'
      }
    }
  },
  components: {
    CellFormPreview,
    Group,
    Cell,
    XButton,
    Loading
  },
  created () {
    this.getData(this.$route.params.id)
  },
  methods: {
    getData (id) {
      this.$http.get(`/api/items/labAppointments/${id}`).then(res => {
        this.detailData = res.data.content
        const { labName: 实验室, experimentName: 实验, day: 日期, timeSlotName: 课程时间, startTime: 开始时间, endTime: 结束时间 } = res.data.content // 解构
        const json = { 实验室, 实验, 日期, 课程时间, 开始时间, 结束时间 }
        console.log(json) // json里面是想要的数据
        for (var pi in json) {
          if (pi !== '课程时间') {
            var keys2 = { label: '', value: '' }
            keys2.label = pi
            keys2.value = json[pi]
            this.detailList.push(keys2)
          } else {
            this.titlaValue = json[pi]
          }
        }
      })
    },
    // 开锁操作
    openLock () {
      this.loading.show = true
      this.$http.put('/api/items/lab/lock', {
        labId: this.detailData.labId
      }).then(res => {
        if (res.data.code) {
          console.log(res.data.content)
        }
        this.loading.show = false
      })
    }
  }
}
</script>
